<?=view('header.html')?>

<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">碎片内容设置</div>
                <div class="layui-form layui-card-body">
                    <form class="layui-form" id="mokform1">
                        
                        <div class="layui-hide mokui-hide" id="ajaxdata">
                            <span id="type"><?=isset($data['type']) ? $data['type'] : ''?></span>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-block">
                                <label class="layui-form-label">中文名称:</label>
                                <div class="layui-input-block">
                                    <input autocomplete="off" class="layui-input" lay-verify="required" name="data[title]" placeholder="名称" type="text" value="<?=isset($data['title']) ? $data['title'] : ''?>" />
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-block">
                                <label class="layui-form-label">调用代码:</label>
                                <div class="layui-input-block">
                                    <input autocomplete="off" class="layui-input" lay-verify="required" name="data[name]" placeholder="调用名称字母或者字母和数字的组合" type="text" value="<?=isset($data['name']) ? $data['name'] : ''?>" />
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-block">
                                <label class="layui-form-label">简介描述:</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea" name="data[description]"><?=isset($data['description']) ? $data['description'] : ''?></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                碎片类型:
                            </label>
                            <div class="layui-input-block">
                                <?php foreach($type as $k=>$v):?>
                                <input type="radio" name="data[type]" lay-filter="switchType" value="<?=$k?>" <?php if(isset($data[ 'type']) && $data[ 'type']==$k){echo 'checked';}?> title="
                                    <?=$v?>">
                                <?php endforeach?>
                            </div>
                        </div>

                        <div class="layui-form-item mokui-hide pieces_input">
                            <div class="layui-block">
                                <label class="layui-form-label">内容:</label>
                                <div class="layui-input-block">
                                    <input autocomplete="off" class="layui-input" name="data[input]" placeholder="内容" type="text" value="<?=isset($data['input']) ? $data['input'] : ''?>" />
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item mokui-hide pieces_textarea">
                            <div class="layui-block">
                                <label class="layui-form-label">内容:</label>
                                <div class="layui-input-block">
                                    <textarea autocomplete="off" class="layui-textarea" name="data[textarea]"><?=isset($data['textarea']) ? $data['textarea'] : ''?></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item mokui-hide pieces_editor">
                            <div class="layui-block">
                                <label class="layui-form-label">内容:</label>
                                <div class="layui-input-block">
                                    <textarea id="varedit" style="display: none;" name="data[editor]"><?=isset($data['editor']) ? $data['editor'] : ''?></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item mokui-hide pieces_file">
                            <div class="layui-inline">
                                <label class="layui-form-label">内容:</label>
                                <div class="layui-input-block">
                                    <div class="layui-upload file">
                                        <div class="mokui-upload-list-wrapper">
                                            <ul class="mokui-sortable mokui-image-upload-list">

                                                <?php if(isset($data['file_info']) && $data['content']):?>
                                                <li class="mokui-upload-item" data-fileid="<?=$data['content']?>">
                                                    <img class="mokui-upload-item-thumb" alt="<?=$data['file_info']['filename']?>" data-src="<?=$data['file_info']['attachment']?>" src="<?=thumb($data['file_info']['attachment'], 200, 200)?>">
                                                    <input type="hidden" value="<?=$data['content']?>" name="data[file]" />
                                                    <span class="mokui-upload-item-delete-span layui-icon layui-icon-close-fill mokui-upload-item-delete"></span>
                                                </li>
                                                <?php endif?>

                                                <div class="mokui-upload-btn-div" id="file">
                                                    <i class="layui-icon layui-icon-addition mokui-upload-add"></i>
                                                </div>

                                            </ul>
                                            <div class="mokui-upload-tips">最多 1 张，单张图片不超过 2M</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item mokui-hide pieces_files">
                            <div class="layui-inline">
                                <label class="layui-form-label">上传多文件:</label>
                                <div class="layui-input-block">
                                    <input autocomplete="off" placeholder="名称" type="hidden" value="" />
                                    <div class="layui-upload pictures">
                                        <div class="mokui-upload-list-wrapper">
                                            <ul class="mokui-sortable mokui-image-upload-list">
                                                <?php if(isset($data['files_info']) && is_array($data['files_info'])):?>
                                                <?php foreach($data['files_info'] as $info):?>
                                                <li class="mokui-upload-item" data-fileid="<?=$info['id']?>">
                                                    <img class="mokui-upload-item-thumb" alt="<?=$info['filename']?>" data-src="<?=$info['attachment']?>" src="<?=thumb($info['attachment'], 200, 200)?>">
                                                    <input type="hidden" value="<?=$info['id']?>" name="data[files][]" />
                                                    <span class="mokui-upload-item-delete-span layui-icon layui-icon-close-fill mokui-upload-item-delete"></span>
                                                </li>
                                                <?php endforeach;?>
                                                <?php endif?>

                                                <div class="mokui-upload-btn-div" id="files">
                                                    <i class="layui-icon layui-icon-addition mokui-upload-add"></i>
                                                </div>
                                            </ul>
                                            <div class="mokui-upload-tips">最多 9 张，单张图片不超过 2M</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item mokui-hide pieces_media">
                            <div class="layui-inline">
                                <label class="layui-form-label">内容:</label>
                                <div class="layui-input-block">
                                    <div class="layui-upload medias">
                                        <button type="button" class="layui-btn" id="video">音视频文件上传</button>
                                        <button type="button" class="layui-btn" id="videoimg">视频封面上传</button>

                                        <div class="mokui-upload-list-wrapper">
                                            <ul class="mokui-sortable mokui-image-upload-list" id="pieces_media_pre">

                                                <?php if(isset($data['media']['video']) && $data['media']['video']):?>
                                                <li class="mokui-upload-item" data-fileid="<?=$data['media']['video']?>">
                                                    <img class="mokui-upload-item-thumb" alt="<?=$data['media']['video_info']['filename']?>" data-src="<?=$data['media']['video_info']['attachment']?>" src="<?=thumb($data['media']['video_info']['attachment'], 200, 200)?>">
                                                    <input type="hidden" value="<?=$data['media']['video']?>" name="data[media][video]" />
                                                    <span class="mokui-upload-item-delete-span layui-icon layui-icon-close-fill mokui-upload-item-delete"></span>
                                                </li>
                                                <?php endif;?>

                                                <?php if(isset($data['media']['cover']) && $data['media']['cover']):?>
                                                <li class="mokui-upload-item" data-fileid="<?=$data['media']['cover']?>">
                                                    <img class="mokui-upload-item-thumb" alt="<?=$data['media']['cover_info']['filename']?>" data-src="<?=$data['media']['cover_info']['attachment']?>" src="<?=thumb($data['media']['cover_info']['attachment'], 200, 200)?>">
                                                    <input type="hidden" value="<?=$data['media']['cover']?>" name="data[media][cover]" />
                                                    <span class="mokui-upload-item-delete-span layui-icon layui-icon-close-fill mokui-upload-item-delete"></span>
                                                </li>
                                                <?php endif;?>

                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item mokui-hide pieces_keyvalue">

                            <div class="multies">

                                <?php if(isset($data['keyvalue']) && $data['keyvalue']):?>
                                <?php foreach($data['keyvalue'] as $k=>$v):?>
                                <div class="layui-block">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">(<?=$k+1?>):</label>
                                        <div class="layui-input-inline mokui-md1">
                                            <input autocomplete="off" class="layui-input" name="data[keyvalue][<?=$k?>][name]" placeholder="名称" type="text" value="<?=$v['name'] ?? ''?>" />
                                        </div>
                                        <div class="layui-input-inline mokui-md1">
                                            <input autocomplete="off" class="layui-input" name="data[keyvalue][<?=$k?>][key]" placeholder="参数" type="text" value="<?=$v['key'] ?? ''?>" />
                                        </div>
                                        <div class="layui-input-inline" style="width: 300px;">
                                            <input autocomplete="off" class="layui-input" name="data[keyvalue][<?=$k?>][value]" placeholder="参数值" type="text" value="<?=$v['value'] ?? ''?>" />
                                        </div>
                                    </div>
                                </div>
                                <?php endforeach;?>
                                <?php else:?>
                                <div class="layui-block">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">(1):</label>
                                        <div class="layui-input-inline mokui-md1">
                                            <input autocomplete="off" class="layui-input" name="data[keyvalue][0][name]" placeholder="名称" type="text" value="" />
                                        </div>
                                        <div class="layui-input-inline mokui-md1">
                                            <input autocomplete="off" class="layui-input" name="data[keyvalue][0][key]" placeholder="参数" type="text" value="" />
                                        </div>
                                        <div class="layui-input-inline" style="width: 300px;">
                                            <input autocomplete="off" class="layui-input" name="data[keyvalue][0][value]" placeholder="参数值" type="text" value="" />
                                        </div>
                                    </div>
                                </div>
                                <?php endif;?>


                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-default" id="add_group">添加一组</button>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-blue" lay-filter="ams_submit" lay-submit="">提交保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <?= view('footer.html')?>
        <script type="text/javascript">
            layui.use(['layer', 'jquery', 'form', 'layedit', 'upload'], function () {
                var layer = layui.layer,
                    $ = layui.jquery,
                    form = layui.form,
                    layedit = layui.layedit,
                    upload = layui.upload;
                

                //编辑器
                layedit.set({
                    uploadImage: {
                        url: adminpath + 'admin/uploads/imgs',
                        type: 'post'
                    }
                });
                var editindex = layedit.build('varedit', {
                    height: 500
                });

                //获取内容
                // layedit.getContent(editindex);
                //获取纯文本
                // layedit.getText(index);
                //同步编辑器内容到textarea
                //layedit.sync(index);
                //获取编辑器选中的文本
                //layedit.getSelection(index);

                //单文件
                var uploadFile = upload.render({
                    elem: '#file',
                    url: adminpath + 'admin/uploads/imgs',
                    accept: 'file',
                    method: 'post',
                    data: {
                        type: 'chart',
                    },
                    auto: true,
                    field: 'file',
                    multiple: false,
                    number: 1,
                    choose: function (obj) { },
                    before: function (obj) {
                        layer.load();
                    },
                    done: function (res, index, upload) {
                        var len = $(".file .mokui-image-upload-list .mokui-upload-item").length;
                        if (len >= 1) {
                            //删除
                            var fid = res.data.fileid;
                            console.log(fid);
                            ams_del_attach(fid);
                            layer.msg('只能上传一个文件', {
                                time: 1500,
                                anim: 6
                            });
                        } else if (res.code == '0' && len <= 0) {
                            var str = '';
                            str += '<li class="mokui-upload-item" data-fileid="' + res.data.fileid + '"><img class="mokui-upload-item-thumb" alt="' + res.data.title + '" data-src="' + res.data.src + '" src="' + res.data.thumb + '">';
                            str += '<input type="hidden" value="' + res.data.fileid + '" name="data[file]" />';
                            str += '<span class="mokui-upload-item-delete-span layui-icon layui-icon-close-fill mokui-upload-item-delete"></span></li>';
                            $(".file .mokui-image-upload-list .mokui-upload-btn-div").before(str);
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                anim: 6
                            });
                        }
                        console.log(res, index);
                        layer.closeAll('loading');
                    },
                    error: function (index, upload) {
                        layer.closeAll('loading');
                    }
                });

                //多文件
                var uploadFiles = upload.render({
                    elem: '#files',
                    url: adminpath + 'admin/uploads/imgs',
                    accept: 'file',
                    method: 'post',
                    data: {
                        type: 'chart',
                    },
                    auto: true,
                    field: 'file',
                    multiple: true,
                    number: 9,
                    before: function (obj) {
                        layer.load();
                    },
                    done: function (res, index, upload) {
                        var len = $(".pictures .mokui-image-upload-list .mokui-upload-item").length;
                        if (len >= 9) {
                            layer.msg('只能上传9个文件', {
                                time: 1500,
                                anim: 6
                            });
                        } else if (res.code == '0' && len <= 30) {
                            var str = '';
                            str += '<li class="mokui-upload-item" data-fileid="' + res.data.fileid + '"><img class="mokui-upload-item-thumb" alt="' + res.data.title + '" data-src="' + res.data.src + '" src="' + res.data.thumb + '">';
                            str += '<input type="hidden" value="' + res.data.fileid + '" name="data[files][]" />';
                            str += '<span class="mokui-upload-item-delete-span layui-icon layui-icon-close-fill mokui-upload-item-delete"></span></li>';
                            $(".pictures .mokui-image-upload-list .mokui-upload-btn-div").before(str);
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                anim: 6
                            });
                        }
                        console.log(res, index);
                        layer.closeAll('loading');
                    },
                    error: function (index, upload) {
                        layer.closeAll('loading');
                    }
                });



                //音视频
                var uploadVideo = upload.render({
                    elem: '#video',
                    url: adminpath + 'admin/uploads/imgs',
                    accept: 'file',
                    method: 'post',
                    data: {
                        type: 'chart',
                    },
                    auto: true,
                    field: 'file',
                    multiple: false,
                    number: 1,
                    choose: function (obj) { },
                    before: function (obj) {
                        layer.load();
                    },
                    done: function (res, index, upload) {
                        var len = $(".medias .mokui-image-upload-list .mokui-upload-item").length;
                        if (len >= 2) {
                            //删除
                            var fid = res.data.fileid;
                            console.log(fid);
                            ams_del_attach(fid);
                            layer.msg('只能上传一个文件', {
                                time: 1500,
                                anim: 6
                            });
                        } else if (res.code == '0' && len <= 1) {
                            var str = '';
                            str += '<li class="mokui-upload-item" data-fileid="' + res.data.fileid + '"><img class="mokui-upload-item-thumb" alt="' + res.data.title + '" data-src="' + res.data.src + '" src="' + res.data.thumb + '">';
                            str += '<input type="hidden" value="' + res.data.fileid + '" name="data[media][video]" />';
                            str += '<span class="mokui-upload-item-delete-span layui-icon layui-icon-close-fill mokui-upload-item-delete"></span></li>';
                            $(".medias .mokui-image-upload-list").append(str);
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                anim: 6
                            });
                        }
                        layer.closeAll('loading');
                    },
                    error: function (index, upload) {
                        layer.closeAll('loading');
                    }
                });


                //音视频封面图
                var uploadVideoImg = upload.render({
                    elem: '#videoimg',
                    url: adminpath + 'admin/uploads/imgs',
                    accept: 'file',
                    method: 'post',
                    data: {
                        type: 'chart',
                    },
                    auto: true,
                    field: 'file',
                    multiple: false,
                    number: 1,
                    choose: function (obj) { },
                    before: function (obj) {
                        layer.load();
                    },
                    done: function (res, index, upload) {
                        var len = $(".medias .mokui-image-upload-list .mokui-upload-item").length;
                        if (len >= 2) {
                            //删除
                            var fid = res.data.fileid;
                            console.log(fid);
                            ams_del_attach(fid);
                            layer.msg('只能上传一个文件', {
                                time: 1500,
                                anim: 6
                            });
                        } else if (res.code == '0' && len <= 1) {
                            var str = '';
                            str += '<li class="mokui-upload-item" data-fileid="' + res.data.fileid + '"><img class="mokui-upload-item-thumb" alt="' + res.data.title + '" data-src="' + res.data.src + '" src="' + res.data.thumb + '">';
                            str += '<input type="hidden" value="' + res.data.fileid + '" name="data[media][cover]" />';
                            str += '<span class="mokui-upload-item-delete-span layui-icon layui-icon-close-fill mokui-upload-item-delete"></span></li>';
                            $(".medias .mokui-image-upload-list").append(str);
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                anim: 6
                            });
                        }
                        layer.closeAll('loading');
                    },
                    error: function (index, upload) {
                        layer.closeAll('loading');
                    }
                });


                form.on('submit(ams_submit)', function (data) {
                    data.field['data[editor]'] = layedit.getContent(editindex);
                    $.post('', data.field, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.location.reload();
                                parent.layer.close(index);
                            });
                            $("#mokform1")[0].reset();
                            // layedit.build(editindex);
                            form.render();
                        } else {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 3000,
                                anim: 6
                            });
                        }
                    }, 'json');
                    return false;
                });


                //添加一组
                $("#add_group").on('click', function () {
                    var k, i = $(".multies .layui-block").length;
                    k = i;
                    i = i + 1;
                    var str = '<div class="layui-block"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">(' + i + '):</label>';
                    str += '<div class="layui-input-inline mokui-md1"><input autocomplete="off" class="layui-input" name="data[keyvalue][' + k + '][name]" placeholder="名称" type="text" value="" /></div>';
                    str += '<div class="layui-input-inline mokui-md1"><input autocomplete="off" class="layui-input" name="data[keyvalue][' + k + '][key]]" placeholder="参数" type="text" value="" /></div>';
                    str += '<div class="layui-input-inline" style="width: 300px;"><input autocomplete="off" class="layui-input" name="data[keyvalue][' + k + '][value]" placeholder="参数值" type="text" value="" /></div>';
                    str += '</div></div></div>';
                    $('.multies').append(str);
                    form.render();
                });


                form.on('radio(switchType)', function (data) {
                    var value = data.value;
                    switchType(value);
                });

                //切换类型
                window.switchType = function (type) {
                    $(".mokui-hide").hide();
                    $(".pieces_" + type).show();
                }

                //初始化
                window.init = function () {
                    var type = $("#type").text();
                    switchType(type);
                }
                init();


            });
        </script>
</body>
